<template>
  <div>
    <Back :title="$t('EditContainer_editContainer')"></Back>
    <div class="box">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="$t('EditContainer_containerParam')" name="Container">
          <EditHome @data="receiveData" :item="conData"></EditHome>
        </el-tab-pane>
        <el-tab-pane :label="$t('EditContainer_equipParam')" name="device">
          <EditDevice @data="receiveData" :item="conData"></EditDevice>
        </el-tab-pane>
        <el-tab-pane :label="$t('EditContainer_memParam')" name="memory">
          <EditMemory @data="receiveData" :item="conData"></EditMemory>
        </el-tab-pane>
        <el-tab-pane :label="$t('EditContainer_cpuParam')" name="cpu">
          <EditCpu @data="receiveData" :item="conData"></EditCpu>
        </el-tab-pane>
      </el-tabs>
      <el-button @click="submitUpdate" style="color: #fff; background: #067FB5; margin-top: 20px; margin-left: 50px">立即修改</el-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Select, Option, Input, Button, Tabs, TabPane, Switch } from 'element-ui'
import post from '@/utils/post'
import Back from '@/components/Back'
import EditHome from '@/components/editContainer/EditHome'
import EditDevice from '@/components/editContainer/EditDevice'
import EditMemory from '@/components/editContainer/EditMemory'
import EditCpu from '@/components/editContainer/EditCpu'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Select)
Vue.use(Input)
Vue.use(Option)
Vue.use(Button)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Switch)

export default {
  data () {
    return {
      conData: null,
      activeName: 'Container',
      updata: {},
      int: 0
    }
  },
  mounted () {
    this.fetchItem()
  },
  methods: {
    // 处理子组件穿回来的参数
    receiveData (data) {
      this.updata[data[0]] = data[1]
      // 做一个延迟动画，等数据传回
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.int++
      if (this.int === 4) {
        this.updataContinaer()
      }
    },
    // 提交修改
    updataContinaer () {
      let obj = {}
      Object.assign(obj, this.updata.Con, this.updata.Cpu, this.updata.Device, this.updata.Memory)
      // console.log(obj)
      const docker = `curl --unix-socket /var/run/docker.sock -s -H "Content-Type:application/json" -d '${JSON.stringify(obj)}' -X POST "http:/v1.40/containers/${this.conData.Id}/update"` // 修改容器
      post({ docker }, res => {
        this.loading.close()
        this.$store.commit('changeIsUpload', false)
        this.int = 0
        if (res.message) {
          return this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
        this.$message({
          showClose: true,
          message: '容器修改成功！',
          type: 'success'
        })
        this.fetchItem()
      }, this)
    },
    // 提交按钮,改变vuex中的状态，让子组件传回参数
    submitUpdate () {
      this.$store.commit('changeIsUpload', true) // 改变vuex中isupload的状态，让子组件传参
    },
    // 获取容器数据
    fetchItem () {
      const docker = `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/containers/${this.$route.params.id}/json"`
      post({ docker }, res => {
        this.conData = res
        // console.log(this.conData)
      }, this)
    }
  },
  components: {
    Back,
    EditHome,
    EditDevice,
    EditMemory,
    EditCpu
  }
}
</script>

<style lang="scss" scoped>
.box{
  margin: 20px 0px;
}
</style>
